<template>
  <div>
    <!-- head -->
    <van-nav-bar
      title="发布房源"
      left-arrow
      class="nav_bar"
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <!-- head -->
    <ul>
      <!-- main -->
      <li>
        <van-cell-group border>
          <van-cell title="房源信息" />
        </van-cell-group>
      </li>
      <!-- ------------------- -->
      <li>
        <van-cell is-link @click="$router.push('/comm')">
          <span>小区名称</span>
          <span class="sp1">{{ communityName || '请输入小区名称' }}</span>
        </van-cell>
      </li>
      <!-- ------------------ -->
      <li>
        <van-field v-model="rent" label="租金" placeholder="请输入租金/月">
          <template #button>
            <van-button style="border: none" size="small">¥ / 月</van-button>
          </template>
        </van-field>
      </li>
      <li>
        <van-field v-model="area" label="建筑面积" placeholder="请输入建筑面积">
          <template #button>
            <van-button style="border: none" size="small">
              m
              <sup>2</sup>
            </van-button>
          </template>
        </van-field>
      </li>
      <!-- ------------------------- -->

      <li>
        <van-cell is-link @click="showPopup1">
          <span>户型</span>
          <span class="sp1">{{ value1 || '请选择' }}</span>
        </van-cell>
        <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }">
          <van-picker
            show-toolbar
            :columns="columns1"
            :default-index="2"
            @confirm="onConfirm1"
            @cancel="onCancel1"
          />
        </van-popup>
        <!-- ----------- -->
        <van-cell is-link @click="showPopup2">
          <span>所在楼层</span>
          <span class="sp1">{{ value2 || '请选择' }}</span>
        </van-cell>
        <van-popup v-model="show2" position="bottom" :style="{ height: '40%' }">
          <van-picker
            show-toolbar
            :columns="columns2"
            :default-index="2"
            @confirm="onConfirm2"
            @cancel="onCancel2"
          />
        </van-popup>
        <!-- --------------- -->
        <van-cell is-link @click="showPopup3">
          <span>朝向</span>
          <span class="sp1">{{ value3 || '请选择' }}</span>
        </van-cell>
        <van-popup v-model="show3" position="bottom" :style="{ height: '40%' }">
          <van-picker
            show-toolbar
            :columns="columns3"
            :default-index="2"
            @confirm="onConfirm3"
            @cancel="onCancel3"
          />
        </van-popup>
      </li>
      <!-- ------------------------- -->
      <li>
        <van-cell-group border>
          <van-cell title="房屋标题" />
        </van-cell-group>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="50"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          show-word-limit
        />
      </li>
      <!-- ------------------ -->
      <li>
        <van-cell-group border>
          <van-cell title="房屋图像" />
        </van-cell-group>
        <van-uploader v-model="fileList" multiple :after-read="afterRead" />
      </li>
      <!-- ------------------------- -->
      <li>
        <van-cell-group border>
          <van-cell title="房屋配置" />
        </van-cell-group>
        <van-grid :column-num="5" :border="false">
          <van-grid-item
            @click="sup(item.label, index)"
            v-for="(item, index) in supporting"
            :key="index"
          >
            <van-icon
              :class="{ 'van-cell__title': list.indexOf(index) !== -1 }"
              size="1.75rem"
              :name="icon[item.label]"
            />
            <span :class="{ 'van-cell__title': list.indexOf(index) !== -1 }">{{
              item.label
            }}</span>
          </van-grid-item>
        </van-grid>
      </li>
      <!-- ------------ -->
      <li>
        <van-cell-group border>
          <van-cell title="房屋描述" />
        </van-cell-group>
        <van-field
          v-model="hometext"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="200"
          placeholder="请输入房屋描述信息"
          show-word-limit
        />
      </li>
      <!-- main -->
      <button class="btn1" @click="fn1">取消</button>
      <button class="btn2" @click="fn2">提交</button>
    </ul>
  </div>
</template>

<script>
import { setHouses, housesParams, housesImg } from '@/api/article'
export default {
  name: 'AddHouse',
  async created() {
    const { community, communityName } = this.$route.query
    // console.log(community, communityName);
    this.community = community
    this.communityName = communityName
    const {
      body: { floor, oriented, roomType, supporting }
    } = await housesParams()
    // console.log(supporting)
    this.floor = floor
    this.oriented = oriented
    this.roomType = roomType
    this.supporting = supporting

    this.columns1 = roomType.map((i) => i.label)
    const re = this.columns1.splice(0, 2)
    this.columns1.splice(2, 0, re[0], re[1])
    // --------------
    this.columns2 = floor.map((i) => i.label)
    // --------------
    this.columns3 = oriented.map((i) => i.label)
  },
  data() {
    return {
      community: '', // 城市code
      communityName: '', // 城市名字
      show1: false, // 户型
      value1: '',
      roomType: [],
      columns1: [],

      show2: false, // 所在楼层
      value2: '',
      floor: [],
      columns2: [],

      show3: false, // 朝向
      value3: '',
      oriented: [],
      columns3: [],

      housetype: {
        supporting: []
      }, //所有房屋类型
      supporting: [], // 房屋配置
      rent: '', // 租金
      area: '', // 建筑面积
      message: '', // 房屋标题
      hometext: '', // 房屋描述
      fileList: [], // 房屋图像
      housesImg: [], // 处理后

      // 房屋配置动态颜色
      list: [],
      // icon图表
      icon: {
        衣柜: 'gift-card-o',
        洗衣机: 'delete-o',
        空调: 'hotel-o',
        天然气: 'fire-o',
        冰箱: 'refund-o',
        暖气: 'bar-chart-o',
        电视: 'tv-o',
        热水器: 'cluster-o',
        宽带: 'desktop-o',
        床: 'printer'
      }
    }
  },
  methods: {
    showPopup1() {
      this.show1 = true
    },
    showPopup2() {
      this.show2 = true
    },
    showPopup3() {
      this.show3 = true
    },
    // 图片上传
    async afterRead(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      // console.log(formData);
      const res = await housesImg(formData)
      // console.log(res);
      this.housesImg.push(res.body[0])
      // console.log(this.housesImg);
    },
    // 取消
    fn1() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否确认放弃发布房源'
        })
        .then(() => {
          this.$router.push('/article')
        })
    },
    // 提交
    async fn2() {
      // console.log(this.message, this.rent, this.hometext, this.area)
      // console.log(this.community);
      // console.log(this.housetype.floor.value);
      // console.log(this.housetype.roomType.value);
      // console.log(this.housetype.oriented.value);
      // console.log(this.housetype.supporting.join('|'));
      // console.log(this.fileList);
      if (this.message && this.rent && this.hometext && this.area) {
        try {
          await setHouses({
            title: this.message,
            description: this.hometext,
            houseImg: this.housesImg.join('|'),
            oriented: this.housetype.oriented.value,
            supporting: this.housetype.supporting.join('|'),
            price: this.rent,
            roomType: this.housetype.roomType.value,
            size: this.area,
            floor: this.housetype.floor.value,
            community: this.community
          })
          // console.log(res);
          this.$toast.success('发布成功')
          this.$router.push('/article')
        } catch (error) {
          console.log(error);
          this.$toast.fail('数据异常')
        }
      } else {
        this.$toast.fail('请完整录入信息')
      }
    },
    // 弹窗确认按钮
    onConfirm1(value) {
      this.show1 = false
      this.value1 = value
      const re = this.roomType.filter((i) => i.label === value)
      this.housetype['roomType'] = re[0]
    },
    onCancel1() {
      this.show1 = false
      this.$toast.fail('取消')
    },
    onConfirm2(value) {
      this.show2 = false
      this.value2 = value
      const re = this.floor.filter((i) => i.label === value)
      this.housetype['floor'] = re[0]
    },
    onCancel2() {
      this.show2 = false
      this.$toast.fail('取消')
    },
    onConfirm3(value) {
      this.show3 = false
      this.value3 = value
      const re = this.oriented.filter((i) => i.label === value)
      this.housetype['oriented'] = re[0]
    },
    onCancel3() {
      this.show3 = false
      this.$toast.fail('取消')
    },
    sup(val, index) {
      if (this.housetype.supporting.indexOf(val) === -1) {
        this.housetype.supporting.push(val)
      } else {
        this.housetype.supporting.splice(
          this.housetype.supporting.indexOf(val),
          1
        )
      }
      if (this.list.indexOf(index) === -1) {
        this.list.push(index)
      } else {
        this.list.splice(this.list.indexOf(index), 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.sp1 {
  float: right;
}
.btn1 {
  width: 50%;
  position: absolute;
  color: #21b97a;
  background-color: #fff;
  border: none;
  left: 0;
  z-index: 999;
  height: 50px;
}
.btn2 {
  position: absolute;
  width: 50%;
  color: #fff;
  background-color: #21b97a;
  border: none;
  right: 0;
  z-index: 999;
  height: 50px;
}
.van-cell__title {
  color: #21b97a;
}
</style>
